<template>
	<div class="topic-type-list">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getListDate()">
		  <el-form-item>
		    <el-input v-model="dataForm.name" placeholder="类型名称" clearable></el-input>
		  </el-form-item>
		  <el-form-item> 
		    <el-button @click="getListDate()">查询</el-button>
		    <!--<el-button v-if="isAuth('topic:type:save')" type="primary" @click="saveHandle()">新增</el-button>-->
		    <!-- <el-button v-if="isAuth('chapter:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
		  </el-form-item>
		</el-form>
  <el-table
    :data="dataList"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="题库类型id"
      header-align="center"
      align="center">
    </el-table-column>
	<el-table-column
	  prop="name"
	  label="题库类型名称"
	  header-align="center"
	  align="center">
	</el-table-column>
	<el-table-column
	  prop="status"
	  label="状态"
	  header-align="center"
	  align="center">
	  <template slot-scope="scope">
	    <el-tag v-if="scope.row.status === 0" size="small" type="danger">停用</el-tag>
		<el-tag v-if="scope.row.status === 1" size="small">正常</el-tag>
	  </template>
	</el-table-column>
	<!--<el-table-column
	      fixed="right"
	      label="操作"
	      header-align="center"
	      align="center">
	      <template slot-scope="scope">
	        <el-button v-if="isAuth('topic:type:save')"  @click="saveHandle(scope.row.id)" type="text" size="small">编辑</el-button>
			<el-button v-if="isAuth('topic:type:status:modify')"  @click="deleteHandle(scope.row.id)" type="text" size="small">删除</el-button>
	      </template>
	    </el-table-column>-->
  </el-table>
  <el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :total="totalPage"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
  <!-- 弹窗, 新增 / 修改 -->
  <save v-if="addOrUpdateVisible" ref="save" @refreshDataList="getListData"></save>
  </div>
</template>

<script>
	import Save from './topic-type-save'
	export default {
		data() {
		  return {
			dataForm: {
			  course_id: ''
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false
		  }
		}, 
		components: {
			Save
		},
		activated() {
			this.getListDate();
		},
		methods: {
			getListDate() {
				let _that = this;
				this.dataListLoading = true
				this.$http({
				  url: this.$http.adornUrl('/topic/type/list'),
				  method: 'get',
				  params: this.$http.adornParams({
					'page': this.pageIndex,
					'limit': this.pageSize,
					'courseName': this.dataForm.courseName,
					'name': this.dataForm.name
				  })
				}).then(({data}) => {
					 _that.dataList = []
				  if (data && data.code === 0) {
					_that.dataList = data.data
					_that.totalPage = data.count
				  } else {
					_that.dataList = []
					_that.totalPage = 0
				  }
				  this.dataListLoading = false
				})
			},
			// 每页数
			sizeChangeHandle (val) {
			  this.pageSize = val
			  this.pageIndex = 1
			  this.getListDate()
			},
			// 当前页
			currentChangeHandle (val) {
			  this.pageIndex = val
			  this.getListDate()
			},
			// 多选
			selectionChangeHandle (val) {
			  this.dataListSelections = val
			},
			// 新增 / 修改
			saveHandle (id) {
			  this.addOrUpdateVisible = true
			  this.$nextTick(() => {
				this.$refs.save.init(id)
			  })
			},
			
			
			// 删除
			deleteHandle (id) {
			  var userIds = id ? [id] : this.dataListSelections.map(item => {
			    return item.userId
			  })
			  this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  }).then(() => {
				var req = {"ids": userIds, "status":-1};
			    this.$http({
			      url: this.$http.adornUrl('/topic/type/status/modify'),
			      method: 'post',
				  // params: this.$http.adornParams({
					 //  "req":req
				  // })
			      data: this.$http.adornData({
					  "req":req
				  })
			    }).then(({data}) => {
			      if (data && data.code === 0) {
			        this.$message({
			          message: '操作成功',
			          type: 'success',
			          duration: 1500,
			          onClose: () => {
			            this.getDataList()
			          }
			        })
			      } else {
			        this.$message.error(data.msg)
			      }
			    })
			  }).catch(() => {})
			}
		}
	}
</script>